<template>
	<div ref="bigScreen" class="main_part">
		<div class="top_part">
			<div class="top_left">
				<div class="count_item" v-for="(item, index) in countList" :key="index">
					<div class="icon_part">
						{{ item.icon }}
					</div>
					<div>
						<div class="title_part">{{ item.title }}</div>
						<div class="num_part">{{ item.num }}</div>
					</div>
				</div>
			</div>
			<div class="top_right">
				<div style="color: aliceblue">
					<el-icon :size="30" color="aliceblue">
						<!-- <FullScreen @click="isFull ? toCloseFullScreen() : toOpenFullScreen()" /> -->
						<FullScreen @click="toFullScreen" />
					</el-icon>
				</div>
				<div>
					<div class="date_part">{{ dateStr.y }}年{{ dateStr.mt }}月{{ dateStr.day }}日</div>
					<div class="other_info">
						<span>{{ dateStr.h }}:{{ dateStr.m }}:{{ dateStr.s }}</span
						>| <span>{{ dateStr.liBai }}</span
						>|
						<span>晴</span>
					</div>
				</div>
			</div>
		</div>
		<div class="center_part">
			<div class="center_left">
				<div class="total_part">
					<div>
						<div class="title">合约数</div>
						<div class="num">44</div>
						<div class="title">交易总次数</div>
						<div class="num">2890225</div>
						<div class="title">区块高度</div>
						<div class="num">{{ blockChainHeight||0 }}</div>
					</div>
					<div>
						<div style="margin-bottom: 20px">
							<img style="height: 40px; width: 40px" src="https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697701459435_ef214b9b.png" alt="" />
							<span style="font-size: 20px; color: #ece23c" @click="toOpenFullScreen">市级节点</span>
						</div>
						<div>
							<img style="height: 40px; width: 40px" src="https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697700057613_af941162.png" alt="" />
							<span style="font-size: 20px; color: #88dff1">12区节点</span>
						</div>
					</div>
				</div>
				<div style="width: 70%; height: 90%; align-self: flex-end">
					<MapChart ref="mapChart"></MapChart>
				</div>
			</div>
			<div class="center_right">
				<div class="search_part">
					<div
						class="option_part"
						ref="selectRef"
						:style="{
							backgroundImage: `url('${
								type == 1
									? 'https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697694417588_42cbe7cb.png'
									: 'https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697687873865_43f75f83.png'
							}')`,
						}"
					>
						<div @click="type = 1" @mouseenter="openBaseList">基础数据</div>
						<div @click="type = 2" @mouseenter="openBussinessList">业务数据</div>
					</div>

					<!-- <div class="input_search_part">
						<div class="select_part" ref="selectRef">服务对象 ></div>
						<input class="input_part" ref="inputRef" v-model="idCard" placeholder="请输入你想要的内容" type="text" name="" id="" />
						<div class="serach_btn" @click="toSearch">搜索</div>
					</div> -->
				</div>
				<!-- 动态部分 -->
				<div class="active_part">
					<Oldman v-if="currentObj.value == 'oldman'"></Oldman>
					<Practitioner v-if="currentObj.value =='practitioner'"></Practitioner>
					<ServiceOrg v-if="currentObj.value =='serviceOrg'"></ServiceOrg>
					<ServerUnit v-if="currentObj.value =='serviceOrgHome'"></ServerUnit>
					<ServerFacility v-if="currentObj.value =='serviceFacility'"></ServerFacility>
				</div>
			</div>
		</div>
		
		<!-- 打开弹窗 -->
		<!-- 展示全部基础或者业务数据库菜单数据 -->
		<el-popover
			:offset="-1"
			:teleported="false"
			ref="optionPopoverRef"
			popper-style="width:944px;margin-left:-50px;padding:0px 22px;box-sizing: border-box;background:#6e8eb2;border:#6e8eb2;margin-left:0px"
			placement="bottom-start"
			:virtual-ref="selectRef"
			trigger="hover"
			virtual-triggering
			:show-arrow="false"
		>
			<div>
				<div v-for="(item, index) in selectOptionList" :key="index">
					<!-- <div class="head_part">{{ item.head }}</div> -->
					<div v-for="(optionItem, ind) in item.option" :key="ind">
						<div class="title_part">{{ optionItem.title }}</div>
						<div>
							<span v-for="el in optionItem.list" :class="el.active ? 'actvie_label_part' : 'label_part'" :key="el.value" @click="changeSelect(el)">{{
								el.label
							}}</span>
						</div>
					</div>
				</div>
			</div>
		</el-popover>
	</div>
</template>

<script setup lang="ts">
import { ref,unref, reactive, toRefs, onMounted } from 'vue'
import MapChart from './components/MapChart/index.vue'
import { FullScreen } from '@element-plus/icons-vue'
import { useFullscreen } from '@vueuse/core'
import Oldman from './components/oldman/index.vue'
import Practitioner from './components/practitioner/index.vue'
import ServiceOrg from './components/serviceOrg/index.vue'
import ServerUnit from './components/serverUnit/index.vue'
import ServerFacility from './components/serverFacility/index.vue'
import {useCommonStore} from '@/stores/common'
let {blockChainHeight} = storeToRefs(useCommonStore())

let selectOptionList = ref([])

let baseList = [
	{
		head: '基础数据',
		option: [
			{
				title: '',
				list: [
					{ label: '服务对象', value: 'oldman', active: true },
					{ label: '从业人员', value: 'practitioner', active: false },
					{ label: '养老机构', value: 'serviceOrg', active: false },
					{ label: '养老服务运营单位', value: 'serviceOrgHome', active: false },
					{ label: '养老设施', value: 'serviceFacility', active: false },
					{ label: '服务商', value: 'ServiceProvider', active: false },
					{ label: '志愿者', value: 'volunteer', active: false },
					
					{ label: '养老专家', value: 'experts', active: false },
					
				],
			},
		],
	},
]
let bussinessList = [
	{
		head: '业务数据',
		option: [
			{
				title: '档案数据',
				list: [
					{ label: '家床建设档案', value: 'familyBedConstruct', active: false },
					{ label: '适老化档案', value: 'reformArchives', active: false },
					{ label: '养老机构评定档案', value: 'elderlyInstitutionsRating', active: false },
					{ label: '社区居家服务组织评定档案', value: 'elderlyFacilitiesRating', active: false },
					{ label: '健康档案', value: 'healthArchives', active: false },
					{ label: '老年人能力评估档案', value: 'elderlyAssessment', active: false },
				],
			},
		],
	},
]
let currentObj:any = ref({})
currentObj.value = baseList[0].option[0].list[0]
let selectRef = ref()
let optionPopoverRef = ref()
const openBaseList = () => {
	type.value = 1
	selectOptionList.value = baseList
	console.log('ddd',selectOptionList.value)
	unref(optionPopoverRef).selectRef?.delayHide?.()
}
const openBussinessList = () => {
	type.value = 2
	selectOptionList.value = bussinessList
	console.log('ddd2',selectOptionList.value)
	unref(optionPopoverRef).selectRef?.delayHide?.()
}

const changeSelect = (el) => {
	selectOptionList.value.forEach((el1) => {
		el1.option.forEach((item) => {
			item.list.forEach((data) => {
				data.active = false
			})
		})
	})
	currentObj.value = el
	el.active = true
}
let bigScreen = ref()
const { toggle, isFullscreen } = useFullscreen(bigScreen)

const toFullScreen = () => {
	toggle()
	let ysq = setTimeout(() => {
		mapChart.value.toReszie()
		clearTimeout(ysq)
	}, 200)
}


// 实时获取日期时间，星期
let t = null
let dateStr = ref({
	y: 0,
	mt: 0,
	day: 0,
	h: null,
	m: null,
	s: null,
	liBai: '',
})
const time = () => {
	clearTimeout(t) //清除定时器
	let dt = new Date()
	dateStr.value.y = dt.getFullYear()
	dateStr.value.mt = dt.getMonth() + 1
	dateStr.value.day = dt.getDate()
	dateStr.value.h = dt.getHours() //获取时
	if (dateStr.value.h < 10) {
		dateStr.value.h = '0' + dateStr.value.h
	}
	dateStr.value.m = dt.getMinutes() //获取分
	if (dateStr.value.m < 10) {
		dateStr.value.m = '0' + dateStr.value.m
	}
	dateStr.value.s = dt.getSeconds() //获取秒
	if (dateStr.value.s < 10) {
		dateStr.value.s = '0' + dateStr.value.s
	}
	let day = dt.getDay()
	if (day == 0) {
		dateStr.value.liBai = '星期日'
	}
	if (day == 1) {
		dateStr.value.liBai = '星期一'
	}
	if (day == 2) {
		dateStr.value.liBai = '星期二'
	}
	if (day == 3) {
		dateStr.value.liBai = '星期三'
	}
	if (day == 4) {
		dateStr.value.liBai = '星期四'
	}
	if (day == 5) {
		dateStr.value.liBai = '星期五'
	}
	if (day == 6) {
		dateStr.value.liBai = '星期六'
	}

	t = setTimeout(time, 1000) //设定定时器，循环运行
}
t = setTimeout(time, 1000) //开始运行


// 获取列表内容

let mapChart = ref()

let isFull = ref(false)
const toOpenFullScreen = () => {
	console.log(bigScreen.value)
	if (bigScreen.value.requestFullscreen) {
		console.log(1)
		bigScreen.value.requestFullscreen()
	} else if (bigScreen.value.mozFullScreenElement) {
		console.log(2)
		bigScreen.value.mozFullScreenElement()
	} else if (bigScreen.value.webkitFullscreenElement) {
		console.log(3)
		bigScreen.value.webkitFullscreenElement()
	}
	isFull.value = true
	let ysq = setTimeout(() => {
		mapChart.value.toReszie()
		clearTimeout(ysq)
	}, 200)
}




let type = ref(1)

let countList = ref([
	// {
	// 	icon: '节',
	// 	title: '节点数据（个）',
	// 	num: '13',
	// },
	{
		icon: 'O',
		title: 'Order节点（个）',
		num: '4',
	},
	{
		icon: 'P',
		title: 'Peer节点（个）',
		num: '13',
	},
])

</script>
<style scoped lang="scss">
.head_part {
	width: 100%;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	text-align: left;
	color: #0052d9;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 0.5px solid #dcdcdc;
}
.title_part {
	margin: 10px 0;
	color: white;
	color: #0052d9;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
}
.label_part {
	margin-bottom: 15px;
	display: inline-block;
	margin-right: 20px;
	color: white;
	/* color: #0052d9; */
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	cursor: pointer;
}
.actvie_label_part {
	margin-bottom: 15px;
	display: inline-block;
	margin-right: 20px;
	color: #0052d9;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	cursor: pointer;
}
.main_part {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	background-image: url('https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697684205459_74ddfd18.png');
	background-size: 100;
	.top_part {
		height: 10%;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.top_left {
			height: 100%;
			width: 40%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-content: center;
			.count_item {
				width: 30%;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.icon_part {
					height: 61px;
					width: 61px;
					border-radius: 6px;
					text-align: center;
					line-height: 61px;
					font-size: 35px;
					font-weight: bold;
					color: white;
					background-color: #1a6eb6;
				}
				.title_part {
					margin-left: 9px;
					font-size: 18px;
					font-weight: 400;
					color: white;
				}
				.num_part {
					margin-left: 9px;
					font-size: 30px;
					font-weight: bold;
					color: white;
				}
			}
		}
		.top_right {
			height: 100%;
			width: 40%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			.date_part {
				text-align: end;
				font-size: 30px;
				font-weight: bold;
				color: #ffffff;
				margin-bottom: 10px;
			}
			.other_info {
				text-align: end;
				font-size: 20px;
				font-weight: 500;
				color: #ffffff;
				span {
					margin: 10px 5px 10px 5px;
				}
			}
		}
	}
	.center_part {
		height: 85%;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		.center_left {
			height: 100%;
			width: 40%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			// align-items: flex-end;
			.total_part {
				height: 90%;
				width: 191px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-top: 40px;

				.title {
					height: 45px;
					line-height: 50px;
					text-align: center;
					color: white;
					width: 100%;
					font-size: 18px;
					background-image: url('https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697684755176_12d9d464.png');
					// background-size: 100% 100%;
					background-repeat: no-repeat;
				}
				.num {
					text-align: center;
					color: #61a2ff;
					margin-bottom: 39px;
					font-size: 36px;
					font-weight: bold;
				}
			}
		}
		.center_right {
			height: 100%;
			width: 70%;

			.search_part {
				height: 48px;
				.option_part {
					height: 46px;
					width: 280px;
					background-image: url('https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697687873865_43f75f83.png');
					background-repeat: no-repeat;
					display: flex;
					flex-direction: row;
					justify-content: space-evenly;
					align-items: center;
					color: #fff;
					font-size: 24px;
					font-weight: bold;
					cursor: pointer;
				}
			}
			.filter_part {
				margin: 20px 0;
				height: 15%;
				width: 100%;
			}
			.table_part {
				margin: 0px 0 20px 0;
				height: calc(100% - 14% - 150px - 20px + 62px);
				width: 100%;
			}
		}
	}
	.the_footer_part {
		height: 5%;
		width: 100%;
		display: flex;
		justify-content: row;
		justify-content: flex-end;
		align-items: center;
	}
}
.input_search_part {
	/* margin: 0px auto; */
	// width: 950px;
	max-width: 956px;
	height: 62px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid #0052d9;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-left: 48px;
	box-sizing: border-box;
	margin-right: 20px;
	color: white;
	box-shadow: inset 0px 0px 10px 0px #538bdc;
}
.input_part {
	background: transparent;
	height: 58px;
	width: calc(100% - 274px);
	border-top: none;
	border-bottom: none;
	border-left: none;
	border-right: none;
	font-size: 20px;
	text-align: left;
	color: #1c1c28;
	line-height: 58px;
	color: white;
}
.input_part:focus {
	outline: none;
}
.serach_btn {
	width: 124px;
	height: 62px;
	border-radius: 0 8px 8px 0;
	background: #4b93fb;
	line-height: 62px;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.2px;
	color: #fff;
	cursor: pointer;
}
th,
td {
	text-align: center;
	color: #fff;
	width: 10%;
	word-break: break-word;
	text-overflow: ellipsis;
	white-space: no-repeat;
	overflow: hidden;
}
.two_table {
	height: calc(100% - 50px);
	width: 100%;
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.two_table::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
.active_part{
	height: calc(100% - 48px + 5% + 20px);
	width: 100%;
}
</style>
<style lang="scss">
.filter_part {
	.el-input__wrapper,
	.el-select-v2__wrapper {
		border: 1px solid #4b93fb;
		box-shadow: inset 0px 0px 10px 0px #538bdc !important;
		background-color: transparent !important;
		color: white !important;
		height: 45px;
		font-size: 16px;
	}
	.el-input__wrapper::placeholder {
		color: white !important;
	}
}
.filter_part {
	.el-form-item--default {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.el-form-item__content {
		justify-self: center;
		align-self: center;
	}
	.el-form-item--default .el-form-item__label {
		color: white;
		font-size: 16px;
		line-height: 45px;
	}
}
.filter_part {
	.el-input__inner,
	.el-select-v2__placeholder {
		color: white;
		font-size: 18px !important;
	}
	.el-input__inner::placeholder {
		color: white !important;
	}
	// .el-select-v2__selected-item ,.el-select-v2__input-wrapper{
	// 	color:rgb(133, 133, 133) !important;
	// }
}
.the_footer_part {
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next,
	.el-pagination.is-background .el-pager li {
		box-shadow: inset 0px 0px 10px 0px #538bdc !important;
		background-color: transparent !important;
		color: white;
	}
}
.the_footer_part {
	.el-pager li.is-active {
		color: #4b93fb !important;
	}
}
</style>
